<template>
  <div class="login">
    <div class="header">
      <img src="@/assets/images/tx.jpg" alt="" />
    </div>
    <div class="form">
      <div class="form-item">
        <input type="text" placeholder="用户名" v-model="user_name" />
      </div>
      <div class="form-item">
        <input type="password" placeholder="密码" v-model="user_password" />
      </div>
      <div class="form-item">
        <button @click="loginRequestApi">用户登录</button>
      </div>
      <div class="form-check">
        <router-link to="/phonelogin">短信登录</router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { UserLoginApi } from "../../api/index";
export default {
  compotents: {},
  data() {
    return {
      user_name: "",
      user_password: "",
    };
  },
  methods: {
    loginRequestApi() {
      UserLoginApi(this.uaer_name, this.user_password).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.$router.push("home");
        }
      });
    },
  },
  mounted() {},
};
</script>
<style lang="less">
.login {
  .header {
    display: flex;
    justify-content: center;
    margin-top: 10rem;
    img {
      width: 10rem;
      height: 10rem;
      border-radius: 50%;
      border: 10px solid rgba(0, 0, 0, 0.5);
    }
  }
  .form {
    width: 100%;
    height: 50rem;
    margin-left: 2rem;
    width: calc(100%-4rem);
    .form-item {
      margin: 1rem 0;
      input {
        width: 100%;
        height: 3.6rem;
        border: 1px solid #cccccc;
        text-indent: 1rem;
      }
      button {
        width: 100%;
        height: 3.6rem;
        background: #f55;
        color: #fff;
      }
    }
  }
}
</style>